<template>
    <div class="main">
        <div class="banner">
            <img :src="banner">
        </div>
        <Content>
            <template #content>
                <div class="b-w p-20-30 box">
                    <div class="title dispaly-center"
                        v-if="state.type == 'person' || state.type == 'culture' || state.type == 'achievement'">
                        <div :class="{ 'ac': item.type == state.topCateValue }" class="item"
                            v-for="(item, index) in state.cateList" :key="index">{{ item.name }}</div>
                    </div>
                    <div class="detail dispaly-col-center">
                        <div class="b-title" v-if="state.type == 'person'">
                            {{ state.cDetail.name }}
                        </div>
                        <div class="b-title" v-else>
                            {{ state.cDetail.title }}
                        </div>
                        <div class="time">{{ state.cDetail.createTime }}</div>
                        <template v-if="state.type != 'person'">
                            <div class="desc " v-html="state.cDetail.content">
                            </div>
                            <div class="cover">
                                <img :src="state.cDetail.img">
                            </div>
                        </template>
                        <template v-else>
                            <div class="cover1 dispaly-align-center">
                                <img :src="state.cDetail.img">
                            </div>
                            <div class="desc" v-html="state.cDetail.content">
                            </div>

                        </template>
                    </div>
                </div>
            </template>
        </Content>
        <Pop />
    </div>
</template>

<script setup>
import { reactive, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { getCelebrityDetail, getListDetail } from '@/api/index/index'
const banner = computed(() => localStorage.getItem('banner'))
const state = reactive({
    cateList: [],
    type: '', // 区分详情类型
    id: '',
    topCateValue: '', // 传过来的分类
    cDetail: {}, // 名人详情
})

const route = useRoute()
const getQuery = () => {
    state.type = route.query.type
    state.id = route.query.id
    state.topCateValue = route.query.tValue
    console.log(state.topCateValue, 'route.query.topCateValue')
}

// 请求详情
const getCelebrityDetailData = async () => {
    const res = await getCelebrityDetail({ id: state.id })
    if (res.code == 200) {
        state.cDetail = res.data
        state.cDetail.name = state.cDetail.firstName + state.cDetail.lastName
    }
}

// 通用详情
const getListDetailData = async () => {
    const res = await getListDetail({ id: state.id })
    if (res.code == 200) {
        state.cDetail = res.data
        // state.cDetail.name = state.cDetail.firstName + state.cDetail.lastName
    }
}

// 处理顶部分类
const topCate = () => {
    switch (state.type) {
        case 'person':
            state.cateList = [
                { name: '科名录', type: 0 },
                { name: '精英录', type: 1 },
                { name: '功名录', type: 2 },
            ]
            break;
        case 'culture':
            state.cateList = [
                { name: '夏氏渊源', type: 0 },
                { name: '字辈堂号', type: 1 },
                { name: '寻根问祖', type: 2 }
            ]
            break;
        case 'achievement':
            state.cateList = [
                { name: '企业', type: 3 },
                { name: '成就', type: 4 },
                { name: '作品', type: 5 }
            ]
    }
}

onMounted(() => {
    getQuery()
    topCate()
    if (state.type == 'person') {
        getCelebrityDetailData()
    } else {
        getListDetailData()
    }
})

</script>

<style lang="scss" scoped>
.ac {
    color: $primary-color !important;
}

.main {
    .banner {
        img {
            width: 100%;
            height: 300px;
        }
    }

    .title {
        padding-bottom: 24px;
        border-bottom: 2px solid #EDE7DB;

        // .item:first-child {
        //     color: $primary-color;
        // }

        .item:last-child {
            margin-right: 0;
        }

        .item {
            margin-right: 40px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            color: #666666;
        }
    }

    .detail {
        .b-title {
            margin: 30px 0 24px 0;
            font-family: MicrosoftYaHei, MicrosoftYaHei;
            font-weight: bold;
            font-size: 22px;
        }

        .time {
            font-family: MicrosoftYaHei;
            font-size: 14px;
            color: #666666;
            margin-bottom: 20px;
        }

        .desc {
            // border-top: 2px dashed #ccc;
            line-height: 30px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            color: #000000;
            text-indent: 2em;
            padding-top: 20px;
        }

        .cover {
            margin-top: 30px;

            img {
                height: 800px;
                width: 100%;
            }
        }

        .cover1 {
            margin-top: 30px;

            img {
                height: 800px;
                //width: 50%;
            }
        }
    }
}
</style>